<template>
	<view class="page_full">
		<view class="page_top">
			<view class="page_top_conetnt">
				<image src="@/static/logo/back_icon.png" mode="" class="back_logo"
				@click="back"></image>
				<text>工单处理</text>
			</view>
		</view>
		<scroll-view scroll-y="true" class="page_scroll_box">
			<view class="page_scroll_content">
				<view class="form_cell">
					<view class="form_title">
						<text>工单标题:</text>
					</view>
					<view class="form_content disable_style">
						<text>{{ infoForm.title }}</text>
					</view>
				</view>
				<view class="form_cell">
					<view class="form_title">
						<text>工单描述:</text>
					</view>
					<view class="form_content disable_style">
						<text>{{ infoForm.detail }}</text>
					</view>
				</view>
				<view class="form_cell">
					<view class="form_title">
						<text>图片详情:</text>
					</view>
					<view class="form_content img_list">
						<view class="form_img_box" v-for="(item,index) in infoForm.userPath" :key="index">
							<image :src="item" mode="aspectFill" @click="perviewImg(item)"></image>
						</view>
					</view>
				</view>
				<view class="form_cell">
					<view class="form_title">
						<text>解决方法:</text>
					</view>
					<view class="form_content" :class="{'disable_style':!EditStatus}">
						<u-textarea v-model="form.engineSoluion" :count="true" placeholder="请输入工单的解决方案" 
						v-if="EditStatus"></u-textarea>
						<text v-else> {{ form.engineSoluion }} </text>
					</view>
				</view>
				<view class="form_cell">
					<view class="form_title">
						<text>解决图片:</text>
					</view>
					<view class="add_img_box" v-if="EditStatus">
						<u-upload
							:fileList="imgList"
							@afterRead="afterRead"
							@delete="deletePic"
							name="file"
							multiple
							:maxCount="3"
							width="100"
							height="100"
							uploadText="上传文件"
						></u-upload>
					</view>
					<view class="form_content img_list" v-else>
						<view class="form_img_box" v-for="(item,index) in imgList" :key="index">
							<image :src="item.url" mode="aspectFill" @click="perviewImg2(item)"></image>
						</view>
						<view class="form_img_box" v-if="imgList.length < 1">
							<text>空</text>
						</view>
					</view>
				</view>
				
				
				<view class="submit_btn" v-if="EditStatus">
					<u-button type="primary" text="提 交" @click="submit"></u-button>
				</view>
				
				<u-toast ref="uToastRef"></u-toast>
				
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app"
	import { ref, computed, reactive, toRefs } from 'vue'
	import { baseUrl } from '@/utils/baseConfig.js'
	import { getOrderInfoAPI } from '@/api/initiate.js'
	import { submitReceiceAPI } from '@/api/receive.js'
	
	const uToastRef = ref(null)
	
	const initInfo = {
		id: "",
		title: "",
		detail: "",
		filePath: [],
		userPath: []
	}
	
	let infoForm = ref({...initInfo})
	
	const initForm = {
		id: "",
		engineSoluion:"",
		engineImages: []
	}
	const data = reactive({
		form: {...initForm},
		imgList: []
	})
	let { form , imgList} = toRefs(data)
	
	// 是否可以编辑
	const EditStatus = computed(()=>{
		return infoForm.value.status == 4
	})
	
	
	// 删除图片
	function deletePic(event) {
		imgList.value.splice(event.index, 1)
	}
	
	// 新增图片
	async function afterRead(event) {
		// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file)
		let fileListLen = imgList.value.length
		lists.map((item) => {
			imgList.value.push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url)
			imgList.value.splice(fileListLen, 1, { url: result })
			fileListLen++
		}
	}
	
	function uploadFilePromise(url) {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: `${baseUrl}/workorder/work/upload`, 
				header:{
					"Authorization": "Bearer " + uni.getStorageSync('token')|| "",
					"clientId": uni.getStorageSync('client_id')||"",
				},
				filePath: url,
				name: 'file',
				formData: {
					user: 'test'
				},
				success: (res) => {
					let data = JSON.parse(res.data)
					resolve(data.data[0])
				}
			});
		})
	}
	
	function back() {
		uni.navigateBack(-1)
	}
	
	// 预览图片
	function perviewImg(url) {
		uni.previewImage({
			loop: true,
			urls: infoForm.value.userPath||[],
			current:url
		})
	}
	
	function perviewImg2(item) {
		uni.previewImage({
			loop: true,
			urls: imgList.value.map(ele=>{ return ele.url }),
			current:item.url
		})
	}
	
	async function submit() {
		if(!form.value.engineSoluion) {
			return uToastRef.value.show({
				type: 'warning',
				message: "请填写解决方案之后提交！"
			})
		}
		form.value.engineImages = imgList.value.map(ele=>{ return ele.url })
		
		const res = await submitReceiceAPI({...form.value })
		if(res.code == 200) {
			uToastRef.value.show({
				type: 'success',
				message: "提交成功！"
			})
			uni.setStorageSync("reget", true)
			setTimeout(()=>{
				uni.navigateBack(-1)
			},1000)
		}
	}
	
	// 获取详情
	async function getOrderInfo(id) {
		const res = await getOrderInfoAPI(id)
		if(res.code == 200) {
			infoForm.value = res.data
			if( infoForm.value.status == '5') { //工单结束的状态
				console.log("zoujinlail ")
				form.value.engineSoluion = infoForm.value.engineSoluion
				imgList.value = []
				infoForm.value.enginePath.forEach(ele=>{
					if(ele) {
						imgList.value.push({ url: ele })
					}
				})
			}
		}
	}
	
	onLoad((options)=>{
		infoForm.value.status = options.status
		infoForm.value.id = options.id
		form.value.id = options.id
		getOrderInfo(options.id)
	})
</script>

<style scoped lang="scss">
	.page_full {
		height: 100vh;
	}
	.page_top {
		width: 100%;
		height: calc(var(--status-bar-height) + 88rpx);
		padding-top: var(--status-bar-height);
		background-color: #f8f8f8;
		position: relative;
		
		.page_top_conetnt {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			position: relative;
		}
		.back_logo {
			--back-img-size: 40rpx;
			width: var(--back-img-size);
			height: var(--back-img-size);
			position: absolute;
			top: 50%;
			left: 30rpx;
			transform: translateY(-50%);
		}
	}
	
	.page_scroll_box {
		width: 100%;
		height: calc(100% - var(--status-bar-height) - 88rpx);
		.page_scroll_content {
			min-height: 100%;
			padding: 30rpx;
			background-color: #fff;
		}
	}
	
	
	.form_cell {
		width: 100%;
		padding-bottom: 12rpx;
		border-bottom: 1rpx solid $uni-color-border;
		.form_title {
			padding: 16rpx;
			font-size: 28rpx;
			
		}
		.form_content {
			color: #666;
			min-height: 30rpx;
		}
		.disable_style {
			padding-left: 1em;
			font-size: 28rpx;
		}
		.add_img_box {
			margin-top: 12rpx;
		}
		.img_list {
			display: flex;
			padding-left: 1em;
			margin-top: 12rpx;
		}
		.form_img_box {
			width: 30%;
			aspect-ratio: 1/1;
			margin-left: 5%;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.form_img_box:first-child {
			margin-left: 0;
		}
	
	}
	
	.submit_btn {
		margin-top: 50rpx;
	}
</style>
